<template>
	<view class="container">
        <div class="header">
            <!-- <div class="tag-box">
                <div class="item" :class="{active: tag_index === index}" v-for="(item, index) in orderList" :key="index" @click="tag_index = index">{{item.name}}</div>
            </div> -->
            <u-search class="search" placeholder="请输入搜索关键字" v-model="keyword" :animation="true" @search="search" @custom="search"></u-search>
        </div>

        <div class="wrapper">
            <div class="swiper-wrapper" :style="{'margin-left': -100*tag_index + 'vw'}">
                <div class="list-wrapper" v-for="(data, idx) in orderList" :key="idx">
                    <div class="list">
                        <div v-if="loading" class="loading">
                            <u-loading class="icon" mode="circle"></u-loading>
                            <div>课程加载中...</div>
                        </div>

                        <template v-if="data.list.length && data.status === 1">
                            <div class="item" v-for="(item, index) in data.list" :key="index" @click="toDetail(item.id)">
                                <div class="item-price">￥{{item.totalFee}}</div>
                                <div class="item-pic" :style="{'backgroundImage': `url(${item.avatar})`}"></div>
                                <div class="item-info">
                                    <div class="item-name">
                                        <div class="label">课程名称 :</div>
                                        <div class="value">{{item.name}}</div>
                                    </div>
                                    <div class="item-time">
                                        <div class="label">活动时间 :</div>
                                        <div class="value">{{item.startTime}}</div>
                                    </div>
                                    <div class="item-address">
                                        <div class="label">活动地址 :</div>
                                        <div class="value">{{item.address}}</div>
                                    </div>
                                </div>
                            </div>
                        </template>

                        <template v-if="data.list.length && data.status === 2">
                        </template>

                        <!-- 空数据 -->
                        <u-empty v-if="!data.list.length && !loading" text="暂无课程" mode="list" :margin-top="200"></u-empty>
                    </div>
                </div>
            </div>
        </div>

        <u-toast ref="uToast" />
	</view>
</template>
<script>
import Vue from 'vue';

import { getCourseListAPI } from '../../api/entertainment'

const app = getApp()
export default Vue.extend({
    data(){
        return {
            loading: true,
            url: 'http://bizser.njtrh.org:9952//images/article/20210813/20210813091352261.jpg',
            keyword: '',
            orderList: [
                {
                    name: '单次课程',
                    status: 1,
                    list: []
                },
                {
                    name: '系列课程',
                    status: 2,
                    list: []
                },
            ],
            list: [],
            tag_index: 0,
        }
    },
    onLoad(options){
        this.init()
    },
    methods: {
        search(text){
            let arr = []
            this.list.map(item => {
                if(item.name.indexOf(text) !== -1){
                    arr.push(item)
                }
            })
            this.orderList[0].list = arr
        },
        init(){
            getCourseListAPI().then(res => {
                this.orderList[0].list = res.classInfoList
                this.list = res.classInfoList
                this.loading = false
            }).catch(err => {
                this.$refs.uToast.show({
		    	    title: err,
		    	    type: 'error',
                })
                this.loading = false
            })
        },
        toDetail(id){
			this.$u.route('pages/courseDetail/courseDetail', {
				id: id
			})
        }
    }
})
</script>
<style lang="scss" scoped>
@import '../../assets/scss/common.scss';

.container{
    min-height: 100vh;
    background-color: #efefef;
}

.header{
    padding: 20rpx 30rpx;
    background-color: #fff;
    .tag-box{
        display: flex;
        justify-content: space-around;
        margin-bottom: 20rpx;
        .item{
            font-size: 28rpx;
            line-height: 1;
            padding: 15rpx 30rpx;
            border-radius: 30rpx;
            transition-duration: 0.2s;
            &.active{
                background-color: $theme-color;
                color: #fff;
            }
        }
    }
}

.wrapper{
    position: fixed;
    // top: 205rpx;
    top: 135rpx;
    bottom: 0;
    left: 0;
    right: 0;
    .swiper-wrapper{
        width: 400vw;
        height: 100%;
        display: flex;
        transition-duration: 0.2s;
        .list-wrapper{
            width: 100vw;
            height: 100%;
            overflow: auto;
            .list{
                padding: 0 30rpx 30rpx;
                .item{
                    position: relative;
                    background: #fff;
                    margin-bottom: 30rpx;
                    border-radius: 20rpx;
                    box-shadow: 1rpx 5rpx 20rpx 1rpx #ccc;
                    .item-price{
                        position: absolute;
                        width: 150rpx;
                        height: 150rpx;
                        font-size: 36rpx;
                        line-height: 130rpx;
                        text-align: center;
                        right: 0;
                        background-image: url('https://bizser.njtrh.com:9954/images/biztd/20211209/20211209010756326.jpg');
                        // background-color: #fff;
                        background-size: cover;
                        background-repeat: no-repeat;
                        background-position: center;
                        color: #fff;
                    }
                    .item-pic{
                        height: 45vw;
                        width: 100%;
                        background-size: cover;
                        background-repeat: no-repeat;
                        background-position: center;
                        overflow: hidden;
                        border-top-left-radius: 20rpx;
                        border-top-right-radius: 20rpx;
                    }
                    .item-info{
                        font-size: 30rpx;
                        color: #534F4F;
                        padding: 10rpx 0;
                        &>div{
                            display: flex;
                            padding: 16rpx;
                            margin: 0 20rpx;
                            border-bottom: 1rpx solid #efefef;
                            .label{
                                flex: none;
                                margin-right: 10rpx;
                            }
                            .value{
                                flex: auto;
                            }
                            &:last-child{
                                border: none;
                            }
                        }
                    }
                }
            }
        }
    }
}

.loading{
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #666;
    padding-top: 200rpx;
    .icon{
        margin-bottom: 20rpx;
    }
}
</style>